<template>
  <div class="zoon_box">
    <!-- 标题 -->
    <div class="_Mimg_box">
      <p class="_Mtxt">动物种类统计</p>
      <p class="_Mtxts">Animal Species statistics</p>
    </div>
    <!-- 柱状图 -->
    <mychart
      id="main"
      :option="option"
      width="4.5rem"
      height="1.575rem"
    ></mychart>
  </div>
</template>

<script>
import * as _ from "lodash";
import mychart from "../module/mychart.vue";
export default {
  components: { mychart },
  props:['animals'],
  data() {
    return {
      zoons: this.animals,
      option: {},
    };
  },
  created() {
  },
  mounted() {
    this.getanimals()
  },
  methods: {
    getanimals(){
      let x= []
      let y= []
      let e = ['鱼类' , '爬行' ,'兽类' , '昆虫' , '两栖' , '蛛形' ,'鸟类'  ]
      for (let key in  this.zoons) {
            x.push(key);
            y.push( this.zoons[key])
          }
          x.map(item=>{
            if(item.includes('Num')){
              return
            }else{
              e.push(item)
            }
          })
          this.drawbar(e , y)
    },
    drawbar(e, y) {
      this.option = {
        responsive: true,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "0%",
          top: "20%",
          right: "0%",
          bottom: "4%",
          containLabel: true
        },
        legend: {
          textStyle:{
            color: "#fff", // 字体颜色
            backgroundColor: "black" // 字体背景色
          
          }
           
        },
        xAxis: {
          // type: "category",
          data: e,
          axisLine: {
            // 坐标轴 轴线
            show: false // 是否显示
          },
          axisTick: {
            // 坐标轴 刻度
            show: false, // 是否显示
            inside: false, // 是否朝内
            length: 3 // 长度
          },
          axisLabel: {
      
              show: true,
              fontfamily: "PingFang",
               color:" rgba(255, 255, 255, 0.80)",
              fontSize: ".14rem"
       
          }
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            // 坐标轴名称样式
            color:" rgba(255, 255, 255, 0.80)",
            padding: [5, 0, 0, 5] // 坐标轴名称相对位置
          },
          axisLine: {
            // 坐标轴 轴线
            show: false // 是否显示
          },
          axisLabel: {
    
              show: true,
              fontfamily: "PingFang",
              color:" rgba(255, 255, 255, 0.80)",
              fontSize: ".14rem"
            
          },
          splitLine: {
            // gird 区域中的分割线
            show: true, // 是否显示
            lineStyle: {
              color: "#1e3c48",
              width: 1,
              type: "solid"
            }
          }
        },
        series: [
          {
            data: y,
            type: "bar",
            showBackground: true,
            barWidth: "60%",
            itemStyle: {
              color: {
                type: "linear",
                x: 0, // 若将此值设为1，表示从右到左渐变
                y: 1, // 若将此值设为1，表示从上到下渐变
                x2: 0, // 左
                y2: 0, // 上
                colorStops: [
                  {
                    offset: 0,
                    color: "#0a4550" // 0% 处的颜色
                  },
                  {
                    offset: 0.9,
                    color: "#2EFFF2" // 90% 处的颜色
                  }
                ]
              }
            },
            label: {
              show: true, // 开启显示
              position: "top", // 在上方显示
              distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效
              verticalAlign: "middle",
           
                color: "#FFF", // 顶部数据的颜色
                fontSize: ".16rem", // 顶部数据的字体大小
                fontfamily: "PingFang"
              
            }
          }
        ]
      }
    }
  },
  }

</script>

<style>
@import "../../../static/newcss/myZoon.css";
</style>
